<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hack For Japanプロジェクト一覧</title>
    <link rel="stylesheet" type="text/css" href="css/html5reset.css">
    <link rel="stylesheet" type="text/css" href="css/projects.css">
  </head>
  <body>
    <section id="projectListPage">
      <nav>
        <header id="projectListHeader">
          <h1>Hack F<span class="c-red">o</span>r Japanプロジェクト一覧</h1>
          <div id="projectListSortBox">
            <select id="sort">
              <option>表示順を並び替える</option>
              <option value="status">活動状況で並び替え</option>
              <option value="lastModified">更新日時の新しい順</option>
            </select>
          </div>
        </header>
        <div id="projectListArea">
          <img src="images/throbber.gif">&nbsp;読み込み中...
        </div>
      </nav>
      <!--
      <table id="projectList">
        <thead>
          <tr>
            <th>
              プロジェクト名
            </th>
            <th>
              説明
            </th>
            <th>
              リーダー
            </th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      -->
    </section>
    <section id="projectDetailPage">
      <div id="projectDetailPageContent"></div>
    </section>

    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script src="https://www.google.com/jsapi"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script src="js/jquery.ba-hashchange-1.3.min.js"></script>
    <script src="js/projects.html.js"></script>
    <script type="text/javascript" src="http://apis.google.com/js/plusone.js">{"parsetags": "explicit"}</script>
    <script id="projectListItemTemplate" type="text/x-jquery-tmpl">
      <li class="dummy{{if status=='活動中'}} projectStatusActive{{/if}}{{if status=='活動停止中'}} projectStatusNonActive{{/if}}{{if status=='終了'}} projectStatusDead{{/if}}">
        <a class="projectLink" href="#project_${encodeURIComponent(name)}">
          <div class="statuses">{{if status}}${status}{{/if}}</div>
          <div class="projectName">${truncate(name, 30)}</div>
          <div class="projectImageArea" align="center">
            <img src="${image}" class="projectImage">
          </div>
          <p class="projectDescription">
            ${truncate(description, 30)}
          </p>
        </a>
      </li>
    </script>
    <script id="projectDetailPageTemplate" type="text/x-jquery-tmpl">
      <header class="dummy{{if status=='活動中'}} projectStatusActive{{/if}}{{if status=='活動停止中'}} projectStatusNonActive{{/if}}{{if status=='終了'}} projectStatusDead{{/if}}">
        <a class="topLink" href="#">トップに戻る</a>
        <h1 id="projectDetailHeaderTitle"><span>${name}</span></h1>
      </header>
      <div id="projectSummary">
        <div id="projectImageArea">
          <img src="${image}" class="projectImage">
        </div>
        <div id="projectInfoArea">
          <div id="projectDescriptionArea">
            ${description}
          </div>
          <div id="projectLinkArea">
            <a href="${url}">${url}</a>
          </div>
          <div id="projectStatusArea">
            状態: ${status}
          </div>
          <div id="plusoneButton" class="g-plusone">Loading...</div>
          <iframe id="facebookLikeButton" src="http://www.facebook.com/plugins/like.php?app_id=206011876101836&amp;href=&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
        </div>
      </div>
      <hr>
      <table class="projectDetailTable">
      <colgroup>
        <col width="200" />
        <col width="600" />
      </colgroup>
      {{if leader}}
        <tr><th>リーダー</th><td>${leader}</td></tr>
      {{/if}}
      {{if members}}
        <tr><th>参加メンバー</th><td>${members}</td></tr>
      {{/if}}
      {{if skills}}
        <tr><th>求められる技術/困っていること</th><td>${skills}</td></tr>
      {{/if}}
      {{if howToJoin}}
        <tr><th>参加方法</th><td>${howToJoin}</td></tr>
      {{/if}}
      {{if place}}
        <tr><th>発祥ハッカソン</th><td>${place}</td></tr>
      {{/if}}
      {{if moderatorURL}}
        <tr><th>moderatorへのリンク</th><td>${moderatorURL}</td></tr>
      {{/if}}
      {{if license}}
        <tr><th>ライセンス</th><td>${license}</td></tr>
      {{/if}}
      {{if discussionURL}}
        <tr><th>ディスカッション</th><td>${discussionURL}</td></tr>
      {{/if}}
      {{if lastModified}}
        <tr><th>更新日</th><td>${lastModified}</td></tr>
      {{/if}}
      {{if comment}}
        <tr><th>更新日</th><td>${comment}</td></tr>
      {{/if}}
      </table>
    </script>
  </body>
</html>
